<script setup>
import { routes } from './router'
import { ref } from 'vue'

const routesList = ref([])

for (let i = 0; i < routes.length; i++) {
  routesList.value.push(routes[i])
}
</script>

<template>
  <el-container style="height: 100vh">
    <el-aside width="220px">
      <img
        style="width: 70%;"
        src="https://kk.nsi-soft.com/group1/M07/02/6D/CkYZh2Qz1RCAPLJ8AAAmvMes0JA324.PNG"
        alt="">
      <el-menu router :unique-opened="true">
        <template v-for="(item, index) in routesList">
          <template v-if="item.children !== undefined">
            <el-sub-menu
              :index="item.path"
              :key="index">
              <template #title> {{ item.meta.title }} </template>
              <el-menu-item
                v-for="(child, c_index) in item.children"
                :index="child.path"
                :key="`${index}_${c_index}`">
                {{ child.meta.title }}
              </el-menu-item>
            </el-sub-menu>
          </template>
          <el-menu-item
            v-else
            :index="item.path"
            :key="index">
            {{ item.meta.title }}
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="text-align: right">
        <div style="display: flex;flex-wrap: wrap;align-content: center;width: 100%;height: 100%;justify-content: end">
          <el-dropdown>
            <span class="el-dropdown-link">刘宇</span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

      </el-header>
      <el-main>
        <router-view />
      </el-main>
      <el-footer>version3.2</el-footer>
    </el-container>
  </el-container>
</template>

<style scoped>
.el-header,
.el-footer {
  background-color: #f9fafc;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #ececec;
}
</style>
